<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>首页</title>			
		<link rel="stylesheet" href="iconfont/iconfont.css?v=0326"/>
		<style type="text/css">
			*{
				padding: 0;
				margin:0;
			}
			a{
				text-decoration: none;
			}
			ul,li{
				list-style: none;
			}
			.course{
				width: 48%;	
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				margin-top: 9px;
				float: left;
				background: #fff;
				overflow: hidden;
				height: 150px;
			}
			.course img{
				width: 100%;
				height: 98px;
				display: block;
				box-sizing: border-box;
			}
			.course p{
				width: 100%;
				font-size: 14px;
				line-height: 28px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow:ellipsis;
				color: #222;
				padding-left: 3px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				margin-top: 5px;
			}
			.course p i{
				/* padding:0 1px; */
				padding-right: 2px;
				padding-left: 1px;
				padding-top: 1px;
				color: #fff;
				background: #f2762e;
				font-size: 12px;
				border-radius: 2px;
				margin-right: 2px;
				margin-top: -2px;
				font-style: normal;
			}

			.course h3 span{
				color: #59afeb;
				float: left;
				font-size: 14px;
				color: #f07361;
				display: block;
				height: 18px;
				line-height: 18px;
				overflow: hidden;
			}
			.course a{
				display: block;
			}
			.course .lecturerNickname{
				color: #59afeb;
				margin-left: 3px;
			}
			.course .coursePrice{
				color: #f57328;
				margin-left: 3px;
			}
			.course h3{
				height: 18px;
				line-height: 18px;
				overflow: hidden;
			}
			.course h3 div {
				font-weight: 100;
				float: right;
				color: #666;
				margin-right: 5px;
			}
			.course h3 span i{
				font-size: 14px;
				line-height: 18px;
				float: left;
			}
			.course h3 span .icon-halfstar{
				   font-size: 15px;
			    line-height: 16px;
			}
			.course h3 div{
				height: 18px;
				line-height: 20px;
				font-size: 14px;
			}
			.course h3 div i{
				font-size: 12px;
				margin-right: 3px;
				color: #666;
				line-height: 20px;
			}
		</style>
		<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script type="text/javascript" src="laytpl.js"></script>

	</head>
	<body>
		<div id="sokeContent"></div>
	</body>
	<script id="course_list" type="text/html">
		{{# for(var i in d){ }}
			{{# if(d[i].type == 'imageAndAudio'){ }}
			<li class="course">
				<a>
					<img src="{{ d[i].middlePicture }}">
					<p><i>微</i>{{ d[i].title }}</p>
					<h3>
						<span>
						</span>
						<div><i class="iconfont">&#xe6b6;</i>{{ d[i].clickNum }}</div>
					</h3>
				</a>
			</li>
			{{# }else{ }}
			<li class="course">			
				<a>				
					<img src="{{ d[i].middlePicture }}">
					<p>{{ d[i].title }}</p>
					<h3>
						<span>
						{{# if(d[i].totalScore == '0.0'){ }}
							{{# for(var x =0; x < 5; x++){ }}
							<i class="iconfont icon-star"></i>						
							{{# } }}
						{{# }else{ }}
							{{# for(var x =0; x < (parseInt(d[i].totalScore)); x++){ }}
							<i class="iconfont icon-star"></i>						
							{{# } }}
							{{# if((d[i].totalScore.substr(2,3)) != 0){ }}
								<i class="iconfont icon-halfstar"></i>	
							{{# } }}
						{{# } }}
						</span>
						<div>
							{{# if(parseInt(d[i].clickNum ) > 9999){ }}
							<i class="iconfont">&#xe6b6;</i>9999+
							{{# }else{ }}
							<i class="iconfont">&#xe6b6;</i>{{ d[i].clickNum }}
							{{# } }}
						</div>
					</h3>
				</a>
			</li>
			{{# } }}
		{{# } }}
	</script>
	<script type="text/javascript" src="index.js"></script>
</html>